import type { IStyleFunctionOrObject, IPivotStyleProps, IPivotStyles } from "@fluentui/react";
import { Stack } from '@fluentui/react'
import { useState, type FunctionComponent, useEffect } from "react";
import { useLocation, useNavigate, useRoutes } from "react-router";



const styles: IStyleFunctionOrObject<IPivotStyleProps, IPivotStyles> = {
    root: {
        width: '1200px',
        marginBottom: '24px',
        backgroundImage: 'url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/stc_20231205230458.png)',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundSize: '150px 59px',
    },
};


const classtext: IStyleFunctionOrObject<IPivotStyleProps, IPivotStyles> = {
    root: {
        backgroundColor: '#197AE3',
        color: '#fff',
        paddingTop: '24px',
        alignItems: 'center'
    },
};



export const Foo: FunctionComponent = () => {
    const location = useLocation()
    const [show, setshow] = useState(false)
    useEffect(() => {
        if (location.pathname.includes('course')) {
            setshow(false)
        } else {
            setshow(true)
        }
    }, [location.pathname])
    return (
        <Stack styles={classtext} disableShrink style={{ display: show ? 'flex' : 'none' }}>
            <Stack styles={styles} disableShrink>
                <Stack horizontal enableScopedSelectors disableShrink>
                    <Stack.Item grow={60}>
                        <div style={{ color: 'rgba(0,0,0,0)' }}>东北师范大学ACM总教练 周老师码克行编程工作室</div>
                    </Stack.Item>
                    <Stack.Item align="center" grow={40} >
                        联系电话、微信
                    </Stack.Item>
                </Stack >
                <Stack horizontal enableScopedSelectors disableShrink>
                    <Stack.Item grow={60}>
                        <div>
                            东北师范大学ACM总教练 周老师码克行编程工作室
                        </div>
                        <div>
                            一树编程明德校区、高新校区
                        </div>
                        <div>
                            易编程
                        </div>
                        <div>
                            彭卡机器人编程中海国际校区/长春明珠校区
                        </div>
                        <div>
                            德育未来编程学校
                        </div>
                    </Stack.Item>
                    <Stack.Item grow={40} shrink={40}>
                        <div>
                            13844905410
                        </div>
                        <div>
                            18686539946
                        </div>
                        <div>
                            18600713023
                        </div>
                        <div>
                            18844176072
                        </div>
                        <div>
                            17386860361
                        </div>
                    </Stack.Item>
                </Stack >
                <Stack >
                    <Stack.Item className="text-center" >
                        如有任何疑问，请联系管理员
                    </Stack.Item>
                </Stack >
            </Stack >
        </Stack >

    )
}


















